<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">博客详情</title>

    <!--引入图标-->
<!--    <link rel="icon" type="image/x-icon" href="../static/favicon.ico" th:href="@{/favicon.ico}"/>-->


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">



</head>
<body class="qt-bj">


<!--导航-->
<nav th:fragment="menu(n)" class="ui m-opacity-mat inverted attached segment m-padded-tb-mini m-shadow-small animate__animated animate__bounce m-guDing">
           <div class="ui container m-dw-f"><!-- container是一个一个容器来放 -->
               <div class="ui inverted secondary stackable menu ">


                   <!-- 导航左边 -->
                   <h2 class="ui teal header item">TGF-BK</h2>
                   <a href="#" th:href="@{/}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="mini home icon"></i>&nbsp;&nbsp;首页</a><!-- icom都是图标，官方文档里面有 -->
                   <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="mini idea icon"></i>&nbsp;&nbsp;分类</a>
                   <a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="mini tags icon"></i>&nbsp;&nbsp;标签</a>
                   <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="mini clone icon"></i>&nbsp;&nbsp;归档</a>
                   <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="mini info icon"></i>&nbsp;&nbsp;关于我</a>
                   <a href="#" th:href="@{/boards}" class="m-item item m-mobile-hide" th:classappend="${n==6} ? 'active'"><i class="mini envelope icon"></i>&nbsp;&nbsp;留言</a>

                   <!-- 搜索栏 -->
                   <!-- right item把div容器放到最后边 -->
                   <div class="right m-item item m-mobile-hide">
                       <!-- input 自动为表单的形式,
                       icon这个div 容器就可以放图标了
                       transparent 透明的意思 -->
                       <form name="search" method="post" action="#" th:action="@{/search}" target="_blank">
                           <div class="ui icon inverted  input">
                               <!-- name点击提交，就会提交用户输入的数据进行查询 -->
                               <input type="text" name="query" placeholder="查询内容...." th:value="${query}"><!-- placeholder默认显示的数据 -->
                               <i onclick="document.forms['search'].submit()" class="search link icon"></i><!-- 搜索图标,link鼠标指到变成手型 -->
                               <!-- onclick="document.forms['search'].submit()"点击图片提交表单，回车也可以 -->
                           </div>
                       </form>
                   </div>

                   <a href="#" th:href="@{/admin}" target="_blank" class="right m-item  m-mobile-hide m-margin-sm"><i class="user icon"></i>&nbsp;&nbsp;后台登陆</a>

                   <!-- 用户未登陆显示a标签，登陆成功显示头像 -->
                   <a href="#" th:href="@{/yhAdmin}" th:classappend="${session.thUser} ? m-dy-xi : m-dy-xs"  class="right m-item  m-mobile-hide m-margin-sm m-padding-left"><i class="user icon"></i>&nbsp;&nbsp;用户登陆</a>
                   <!-- 右边头像 -->
                   <div th:classappend="${session.thUser} ? m-dy-xs : m-dy-xi" class="right m-item m-mobile-hide menu ">
                       <!-- item自适应居中 -->
                       <!-- dropdown是bootstrap的组件，头像下拉框组件 -->
                       <div class="dropdown item">
                           <img class="ui avatar image" src="http://i2.tiimg.com/724771/7aafc5cff55c9351.jpg" th:src="${session.thUser} ? @{${session.thUser.avatar}}">
                           <button class="btn btn-default dropdown-toggle m-zdys" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" th:text="${session.thUser} ? ${session.thUser.nickname}">
                               一个人的~
                               <span class="caret"></span>
                           </button>
                           <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                               <li><a href="#" th:href="@{/yhAdmin/logout}">注销</a></li>
                               <li role="separator" class="divider"></li>
                               <li><a href="#" th:href="@{/yhAdmin/qqInfos}">个人中心</a></li>
                           </ul>
                       </div>
                   </div>


               </div>
           </div>



        <!-- 加上面包导航，移动端点击面包导航才显示出来,m-right-top自定义样式显示到右边,m-mobile-show移动端才显示这个图标 -->
        <!-- menu toggle这个只是为了让jquery获取这个图标的，当点击这个图标，就把m-mobile-hide样式变为显示 -->
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><!-- icon button图标按钮 -->
            <i class="sidebar icon"></i><!-- 面包样式 -->
        </a>
    </nav>




<!--底部footer-->
<footer th:fragment="footer" class="ui m-opacity-mat inverted vertical segment m-padded-tb-massive m-mobile-hide">
    <div class="ui center aligned container"><!-- container容器,center aligned所有容器居中 -->


        <!-- grid就是一个一个格子 , 相当于bootstrap的栅格系统 , grid是分成16份-->
        <!-- 这里前面1格占1分，3格都占3份，后面一格占6份 -->
        <div class="ui inverted divided stackable grid"><!-- divided这个对grid栅格系统加上分隔线 -->
            <!-- 占几份直接用英文的数字 -->


            <!-- 第一个格子 -->
            <div class="four wide column"><!-- four4份 -->
                <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
                    <div class="item"><!-- item居中对齐 -->
                        <!-- 图片，rounded图片是圆角,ewm-dx自定义图片大小 -->
                        <img src="https://kyun.ltyuanfang.cn/tc/2020/08/15/f11f809a42533.png" class="ui rounded image ewm-dx" alt="" >
                    </div>
                </div>
            </div>


            <!-- 第二个格子 -->
            <div class="three wide column"><!-- three3份 -->
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4><!-- 标题 -->
                <div id="newblog-container">
                    <div class="ui inverted link list" th:fragment="newblogList"><!-- inverted反转颜色，link鼠标手指 -->
                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog : ${newBlogs}" th:text="${blog.title}">用户故事</a>
                        <!--/*-->
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <!--*/-->
                    </div>
                </div>
            </div>


            <!-- 第三个格子 -->
            <div class="three wide column"><!-- three3份 -->
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4><!-- 标题 -->
                <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
                    <a href="#" class="item" th:text="#{index.email}">Email: 2247605840@qq.com</a>
                    <a href="#" class="item" th:text="#{index.qq}">QQ: 2247605840</a>
                    <a href="#" class="item" th:text="#{index.wx}">微信: xinyikuoai</a>
                </div>
            </div>


            <!-- 第四个格子 -->
            <div class="six wide column"><!-- seven7份 -->
                <h4 class="ui inverted header m-text-thin m-text-spaced">温暖一刻!</h4><!-- 标题 -->
                <p class="m-text-thin m-text-spaced m-opacity-mini" th:text="#{index.blogDescription}">真正属于你的💖，不应该是伤人的冰块，应该是一杯温暖人的热茶!</p>
            </div>
        </div>


        <!-- 最底下的,divider分割线,section跟上面的div的间隔s -->
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">属于你的终究是我</p>



    </div><!-- 最外面的容器container -->





</footer>











<th:block th:fragment="script">
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>


    <!--背景线条特效-->
    <script type="text/javascript" color="47,135,193" opacity='0.5' zIndex="-2" count="199" src="http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
    <!--看板娘-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
    <!-- 鼠标点击效果 -->
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
    <!--     Bootstrap js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>


    <!-- 底部最新推荐刷新 -->
    <script>
        $('#newblog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog");
    </script>


        <!--音乐播放器-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<!--    这个是随机播放data-order="random"-->
    <div class="aplayer" data-autoplay="false"  data-id="5190370155" data-server="netease" data-type="playlist" data-fixed="true" data-volume="0.5"  data-listfolded="true"></div>
    <script src="http://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <script src="http://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>


    <!-- 雪花特效 -->
    <script type="text/javascript" src="../static/js/snow.js" th:src="@{/js/snow.js}"></script>


    <!-- 鼠标点击特效 直接给每一个页面要用的加上buryit这个类标签就可以了-->
    <script type="text/javascript" src="../static/js/click_show_text.js" th:src="@{/js/click_show_text.js}"></script>

    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
</th:block>




</body>
</html>